<!-- 弹框 -->
<template>
  <el-dialog class="my-dialog" draggable v-bind="$attrs" v-model="modelValue" :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody" :fullscreen="fullscreen" :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape" :width="comWidth" :top="top" @closed="closed">
    <template v-slot:title>
      <slot name="title">
        <my-title :title-name="dialogTitle" class="my-dialog-title" />
      </slot>
    </template>
    <div v-loading="loading" class="body-content">
      <slot></slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <slot name="footer">
          <my-button type="close" size="small1" @click="closed">关闭</my-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'MyDialog'
}
</script>
<script setup>
import { computed } from 'vue'
import MyTitle from '../MyTitle/index.vue'
import MyButton from '../MyButton/index.vue'
const props = defineProps(
  {
    visible: { type: Boolean, default: false }, // 是否可见
    loading: { type: Boolean, default: false }, // 是否加载中
    top: { type: String, default: '13vh' }, // 距离顶部的距离
    fullscreen: { type: Boolean, default: false }, // 是否全屏
    size: { type: String, default: 'big' }, // 大小
    width: { type: [Number, String], default: 0 }, // 宽度
    dialogTitle: { type: String, default: '标题' }, // 弹出框标题
    modalAppendToBody: { type: Boolean, default: true }, // 是否将弹出框插入到body中
    appendToBody: { type: Boolean, default: true }, // 是否将内容插入到body中
    closeOnClickModal: { type: Boolean, default: false }, // 是否在点击模态框时关闭
    closeOnPressEscape: { type: Boolean, default: false }, // 是否在按下ESC键时关闭
    dblclickDisabled: { type: Boolean, default: false } // 是否禁用双击放大
  },
  ['modelValue']
)

const comWidth = computed(() => {
  if (props.size === 'small') {
    return props.width || '347px'
  } else if (props.size === 'middle') {
    return props.width || '674px'
  } else if (props.size === 'big') {
    return props.width || '1000px'
  }
  return props.width || '1000px'
})

const emit = defineEmits(['update:modelValue'])
const closed = () => {
  emit('update:modelValue')
}
</script>